<template>

  <div style="display: flex; flex-direction: column; align-items: center;">
    <el-table :data="tableData" >
      <el-table-column prop="textbookId" label="教材Id" >
      </el-table-column>

      <el-table-column prop="courseName" label="课程名">
      </el-table-column>
      <el-table-column prop="departmentId" label="系Id">
      </el-table-column>
      <el-table-column prop="pressId" label="出版社Id">
      </el-table-column>
      <el-table-column prop="price" label="标价">
      </el-table-column>
      <el-table-column prop="name" label="书名">
      </el-table-column>
      <el-table-column prop="changeNum" label="数目变化" >
      </el-table-column>
      <el-table-column prop="stock" label="变化后数目">
      </el-table-column>
    </el-table>
    <el-pagination
        :page-size="pageSize"
        :pager-count="pageNum"
        :total="totalCount"
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
    >
    </el-pagination>

  </div>
</template>

<script>
import request from "@/utils/request";
import {Message} from "element-ui";

export default {
  data() {
    return {
      pageSize: 13,
      pageNum: 1,
      totalCount: 0,
      tableData: [],

    }
  },

  mounted() {
    this.GetAllStockChange();
  },
  methods: {

    GetAllStockChange() {

      const GetAllStockChangeRequest = {

        pageNum:this.pageNum,
        pageSize:this.pageSize,

      }
      request.post("/textbook/queryStockChange", GetAllStockChangeRequest)
          .then(res => {
            console.log(res.data);

            this.tableData = res.data.data.list;
            this.totalCount = res.data.data.totalCount;


          })
          .catch(error => {
            console.error("Error fetching data:", error);
          });
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.GetAllStockChange;
    },

  }
};
</script>
